<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>grid-area</title>
    <style>
.main {
    background-color: #eeeeee;
    display: grid;
    margin: 10px 60px;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(9, 30px);
    grid-auto-rows: 60px;
    row-gap: 40px;
    column-gap: 60px;
}
div div {
    color: white;
    font-weight: bold;
    font-size: 40px;
    text-align: center;;
}
.huayuan {
    background-color: brown;
    grid-row: 8 / -1;
    grid-column: 3 / -3;
}
.caiyuan {
    background-color: cadetblue;
    grid-row: 1 / 3;
    grid-column: 1 / -3;
}
.house {
    background-color: cornflowerblue;
    grid-row: 3 / 8;
    grid-column: 3 / 7;
}
.rest_area {
    background-color: darksalmon;
    grid-row: 3 / -1;
    grid-column: 1 / 3;
}
.guoyuan {
    background-color: hotpink;
    grid-row: 1 / -1;
    grid-column: -3 / -1;
}
.tree {
    background-color: green;
    grid-row: 10 / 11;
    grid-column: 1 / -1;
}
    </style>
</head>
<body>
<div class="main">
    <div class="huayuan">花园</div>
    <div class="caiyuan">菜园</div>
    <div class="house">房子</div>
    <div class="rest_area">休息区</div>
    <div class="guoyuan">果园</div>
    <div class="tree">树</div>
</div>
</body>
</html>